<template>
  <Page class="bg-[#f5f7fa] min-h-screen">
    <PageHeader title="系统消息" :showBack="true" />
    
    <!-- 系统消息列表 -->
    <view class="mx-[24rpx] mt-[24rpx]">
      <view v-if="loading" class="flex justify-center items-center h-[200rpx]">
        <view class="text-[28rpx] text-[#999]">加载中...</view>
      </view>
      
      <view v-else-if="systemMessages.length === 0" class="bg-white rounded-[24rpx] p-[80rpx] text-center">
        <view class="text-[28rpx] text-[#999] mb-[16rpx]">暂无系统消息</view>
        <view class="text-[24rpx] text-[#ccc]">系统会在这里推送重要通知</view>
      </view>
      
      <view v-else class="space-y-[16rpx]">
        <view
          v-for="(message, index) in systemMessages"
          :key="index"
          class="bg-white rounded-[24rpx] p-[24rpx] shadow-sm"
        >
          <view class="flex items-start justify-between mb-[16rpx]">
            <view class="flex items-center">
              <view class="w-[60rpx] h-[60rpx] rounded-full bg-[#e3f2fd] text-[#2196F3] flex items-center justify-center font-bold text-[24rpx] mr-[16rpx]">
                系
              </view>
              <view>
                <view class="text-[28rpx] font-bold text-[#222] mb-[4rpx]">{{ message.title }}</view>
                
              </view>
            </view>
            <view v-if="!message.read" class="w-[12rpx] h-[12rpx] rounded-full bg-red-500"></view>
          </view>
          
          <view class="text-[26rpx] text-[#666] leading-[1.6] mb-[16rpx]">
            {{ message.content }}
          </view>
          
          <view class="flex justify-between items-center">
            <view class="text-[22rpx] text-[#999]">{{ message.time }}</view>
            <nut-button
              size="small"
              type="primary"
              class="bg-[#2196F3] border-none rounded-[16rpx] px-[24rpx] py-[8rpx] text-[24rpx]"
              @click="handleAction(message)"
            >
              {{ !hasBtn(message) ? "查看更多" : message.actionText }}
            </nut-button>
          </view>
        </view>
      </view>
    </view>
  </Page>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Taro from '@tarojs/taro';
import PageHeader from '@/components/PageHeader.vue';
import { post } from '../../utils/request';


const typeMap = {
  "TASK": "悬赏",
  "TASK_CHECK": "签到",
  "TRAINING": "培训",
  "RECRUITMENT_DAILY": "日结",
  "RECRUITMENT": "招聘"
}

function hasBtn(message: any){
  const t = message.type.toUpperCase().replace(/[_\s]/g, '');
  for(let i in typeMap){
    // console.log("i==>", i, t)
    if(t == i.replace(/[_\s]/g, '')){
      return true;
    }
  }
  return false;
}

/**
 * 系统消息列表页面
 * @description 显示系统通知消息，支持操作按钮
 */

const loading = ref(true);

// 系统消息列表
const systemMessages = ref([]);

function getDetailUrl(type: string){
  const str =type.toLowerCase();
  if(str.includes("daily")){
    return "/pages-detail/post/recruit/order-acceptance-detail";
  }
  if(str.includes("task")){
    return "/pages/webs/task-details-reward-task-platform";
  }
  if(str.includes("recruitment")){
    return "/pages-detail/post/recruit/factory-recruitment-detail";
  }
  return "";
}
/**
 * 处理消息操作
 */
const handleAction = async (message: any) => {
  console.log('message==>',message)
  // 标记为已读
  // message.read = true;
  post('/sysMessage/update', {
    "id": message.id
  })
  message.read = true;
  if(!hasBtn(message)){
    Taro.showToast({
      title: message.title,
      icon: 'none'
    });
    return;
  }
  if(message.content == "任务执行提醒"){
    Taro.navigateTo({
      url: '/pages/webs/task-details-reward-task-platform?id=' + message.bid
    });
    return;
  }
  if(message.content.includes("报名提醒")){
    Taro.navigateTo({
      url: `/pages/post/applicants?taskId=${message.bid}&type=` + message.type
    });
    return;
  }
  if(message.content == "任务报名通过提醒"){
    const url = getDetailUrl(message.type)
    Taro.navigateTo({
      url: url + '?id=' + message.bid
    });
    return;
  }
  
  switch (message.actionText) {
    case '查看详情':
      Taro.showToast({
        title: '跳转到维护详情页面',
        icon: 'none'
      });
      break;
    case '立即体验':
      Taro.showToast({
        title: '跳转到新功能页面',
        icon: 'none'
      });
      break;
    case '查看任务':
      Taro.navigateTo({
        url: '/pages/webs/task-details-reward-task-platform?id=' + message.bid
      });
      break;
    default:
      Taro.showToast({
        title: '操作成功',
        icon: 'success'
      });
  }
};

onMounted(() => {
  // 模拟加载
  setTimeout(() => {
    loading.value = false;
  }, 500);
});

// 系统消息列表
const getSysMessage = async () => {
  const res = await post('/sysMessage/list', {
    "pageNo": 1,
    "pageSize": 100
  })
  console.log('系统消息列表==>',res)
  if(res.code == 0){
    systemMessages.value = res.data.map((obj: any) => {
      const item = obj.columns
      // id: '1',
      // title: '系统维护通知',
      // content: '今晚22:00-24:00进行系统升级，期间可能影响部分功能使用，请提前做好准备。',
      // time: '2024-01-15 14:30',
      // read: false,
      // action: true,
      // actionText: '查看详情'
      return {
        id: item.id,
        title: item.title,
        content: item.msg,
        time: item.create_time,
        bid: item.bid,
        read: item.status != 0,
        action: !!item.bid,
        actionText: !!item.bid ? '查看任务' : '查看详情',
        type: (item.type + "").toLowerCase()
      }
    })
  }
}
getSysMessage()
</script> 